<template>

  <div class="guess">
    <div class="guess-desc"
         :class="[guessDescChange]">
      <div>猜你喜欢</div>
    </div>
    <router-link
      tag="div"
      class="guess-content"
      v-for="item of guessList"
      :key="item.id"
      :to='"/detail/"+item.id'>
      <div class="guess-content-img">
        <img :src="item.imgUrl"
             alt="">
        <div>{{item.rank}}</div>
      </div>
      <div class="guess-content-desc">
        {{item.desc}}
      </div>
      <div class="guess-content-prise">
        <div class="guess-content-prise-left">
          酒店距景点{{item.distance}}km
        </div>
        <div class="guess-content-prise-right">
          <span class="guess-rmb">￥</span>{{item.prise}} <span>起</span>
        </div>
      </div>
    </router-link>
  </div>
</template>

<script>
  export default {
    name: 'homeGuess',
    props: {
      guessList: Array
    },
    data() {
      return {
        guessDescChange: '',
        // guessList: [
        //   {
        //     id: '001',
        //     imgUrl: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2706739467,2637207673&fm=26&gp=0.jpg',
        //     rank: '176点评 98%满意度',
        //     desc: '常州西太湖明都国际会议中心1晚，自选常州淹城/美食套餐',
        //     distance: '5.79',
        //     prise: '280'
        //   },
        //   {
        //     id: '002',
        //     imgUrl: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1588228448901&di=629993ad62b58204255c2b60774cb246&imgtype=0&src=http%3A%2F%2Fimg.yanj.cn%2Feditor%2F20160329182826_61010.png',
        //     rank: '176点评 98%满意度',
        //     desc: '常州西太湖明都国际会议中心1晚，自选常州淹城/美食套餐',
        //     distance: '5.79',
        //     prise: '280'
        //   },
        //   {
        //     id: '003',
        //     imgUrl: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1588228477144&di=b27c871073a0cc03ed41e097057b5cfc&imgtype=0&src=http%3A%2F%2Fpic3.40017.cn%2Fcom%2Fyouji%2F2015%2F11%2F25%2F15%2Fw0nwl0_750x_00.jpg',
        //     rank: '176点评 98%满意度',
        //     desc: '常州西太湖明都国际会议中心1晚，自选常州淹城/美食套餐',
        //     distance: '5.79',
        //     prise: '280'
        //   }
        // ]
      }
    },
    methods: {
      scrollChange() {
        let height = document.documentElement.scrollTop;
        //console.log(height)
        if (height > 600) {
          this.guessDescChange = 'guessDescChange'
        } else {
          this.guessDescChange = ''
        }
      }
    },
    mounted() {
      window.addEventListener('scroll',
        this.scrollChange)
    }
  }
</script>


<style lang="stylus" scoped>
  .guess
    border-top: .2rem solid #eee
    background: #fff

  .guess-desc
    overflow: hidden
    height: 0
    padding-bottom: 10%
    text-align: center
    color: #23beae

  .guessDescChange
    position: fixed
    top: .9rem
    left: 0
    width: 100%
    background: #fff
    z-index: 100

  .guess-desc > div
    overflow: hidden
    width: 25%
    height: 0
    padding-bottom: 6%
    margin: 0 auto
    padding-top: .23rem
    border-bottom: .1rem solid #23beae

  .guess-content
    overflow: hidden
    width: 92%
    height: 0
    padding-bottom: 64%
    margin: 0 auto

  .guess-content-img
    position: relative
    overflow: hidden
    height: 0
    padding-bottom: 48.3%

  .guess-content-img > img
    max-width: 100%

  .guess-content-img > div
    position: absolute
    bottom: .2rem
    left: .1rem
    color: #fff

  .guess-content-desc
    overflow: hidden
    height: 0
    padding-bottom: 12%
    text-align: left
    padding-top: .1rem
    text-indent: .1rem
    font-size: .28rem
    font-weight: bold
    letter-spacing: .01rem
    line-height: .35rem

  .guess-content-prise
    overflow: hidden
    height: 0
    padding-bottom: 10%

  .guess-content-prise-left
    float: left
    color: #aaa

  .guess-content-prise-right
    float: right
    margin-right: .1rem

  .guess-rmb
    font-size: .3rem !important

  .guess-content-prise-right > span
    color: red
    font-weight: bold
    font-size: .33rem
</style>
